<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #info{width:70px;height:30px}
    </style>
    <link href="css/home.page.css" rel="stylesheet" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css">
    <script charset="UTF-8" src="js/testActivityName.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <link href="css/new_file.css" rel="stylesheet" type="text/css">
    <script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=6zkqjWn3h5jKHFahFDlG5v9klMfwfGhZ'></script>
    <title>百度地图api展示</title>
</head>
<style>
    .mui-bar{
             padding-right: 0px; 
             padding-left:0px; 
    }
</style>
<body>
    <div class="spin"></div>
    <header id="header" class="mui-bar mui-bar-transparent" style="width: 100%;">
        <div class="head-zhjf">
            <img src="images/fanhui@3x.png" class="ryjk-tx" onclick="Returnfunction()">
            <div id="imagestianjia">
            </div>
            <p>牧场定位</p>
        </div>
        <div class="search-div" style="background: no-repeat; ">
            <div class="g-bd2">
                <div class="search-l-div">
                    <div class="seach-l-a">
                        <img class="sousuo-acx" src="images/sousuo-btn@3x.png">
                        <input id="CattleSeachDatacowLost" class="xtsz-search-btn" type="text" placeholder="请输入搜索内容" onfocus="if(value==defaultValue){value='';this.style.color='#393e46'}" onblur="if(!value){value=defaultValue;this.style.color='#cdcdcd'}">
    
                    </div>
                </div>
                <div class="seach-r-div" onclick="houseListSeach()">
                    <img class="cx-div" src="images/sousuo-a-btn@3x.png" />
                </div>
            </div>
        </div>
    </header>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var str=1 ;
    //新建三个地图上点
    var pointsO = [
        {"lng":112.670154 ,"lat":28.408274,"id":1,"name":"优卓牧业花海牧场","address":"湖南省长沙市宁乡市双江口镇槎梓桥村杜家桥组12号","cow":"200头","img":"/img/cows.png"},
        {"lng":117.448487 ,"lat":32.095822,"id":2,"name":"现代牧业肥东牧场","address":"安徽省合肥市肥东县","cow":"1000头","img":"/img/cows.png"},
        {"lng":113.159013 ,"lat":41.083231,"id":3,"name":"雪原奶牛生态牧场","address":"乌兰察布市集宁区内察哈尔右翼前旗韩土路西100米","cow":"500头","img":"/img/cows.png"}
    ];
    var pointsT = [
        {"lng":112.670154 ,"lat":28.408274,"id":1,"name":"X888","address":"9栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":112.670220 ,"lat":28.408254,"id":2,"name":"X777","address":"8栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":112.670340 ,"lat":28.408234,"id":3,"name":"X666","address":"7栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":112.670470 ,"lat":28.408214,"id":3,"name":"X555","address":"6栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":117.448487 ,"lat":32.095822,"id":1,"name":"X888","address":"9栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":117.448567 ,"lat":32.095842,"id":2,"name":"X777","address":"8栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":117.448647 ,"lat":32.095862,"id":3,"name":"X666","address":"7栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":117.448727 ,"lat":32.095882,"id":3,"name":"X555","address":"6栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":113.159013 ,"lat":41.083231,"id":1,"name":"X888","address":"9栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":113.159133 ,"lat":41.083211,"id":2,"name":"X777","address":"8栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":113.159253 ,"lat":41.083191,"id":3,"name":"X666","address":"7栏","cow":"100头","img":"/img/cattle/cows.png"},
        {"lng":113.159373 ,"lat":41.083171,"id":3,"name":"X555","address":"6栏","cow":"100头","img":"/img/cattle/cows.png"}
    ];
    var marker;
    //创建标注点并添加到地图中
    function addMarker(points) {
        //循环建立标注点
        for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
            var point = new BMap.Point(points[i].longitude, points[i].latitude); //将标注点转化成地图上的点
            //var marker = new BMap.Marker(point);
            var myIcon = new BMap.Icon("./img/cows.png", new BMap.Size(34,34));

            marker = new BMap.Marker(point,{icon:myIcon}); //将点转化成标注点
            console.log('3', marker)
            var label1=points[i].collar_code;
            var label = new BMap.Label(label1, {offset: new BMap.Size(15, -25)});
            marker.setLabel(label);
            console.log('4')
            map.addOverlay(marker);  //将标注点添加到地图上
            //添加监听事件
            (function() {
                var thePoint = points[i];
                console.log('5')
                marker.addEventListener("click",
                    function() {
                        showInfo(this,thePoint);
                    });
            })();
        }
    }
    //删除标点
    function deletePoint(){
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
            map.removeOverlay(allOverlay[i]);
        }
    }
    function showInfo(thisMarker,point) {
        //获取点的信息
        var sContent =
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
            +'<span style="width: 150px;display: inline-block;color:#CC5522">' + point.collar_code + '</span></li>'
            // +'<br><span style="width: 50px;display: inline-block;">地址：</span>' + point.address + '</li>'
            // +'<br><span style="width: 50px;display: inline-block;">牛只：</span>' + point.cow + '</li>'
            +'</ul>';
        var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
        thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
    }
    //创建地图
    var map = new BMap.Map('allmap');
    map.centerAndZoom(new BMap.Point(111.65,40.82), 1);  // 设置中心点
    map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    if(str == 1){
        var postionData = JSON.parse(localStorage.getItem('postionData'));
        console.log('1', pointsO)
        // postionData[0].longitude = parseFloat(postionData[0].longitude)
        // postionData[0].latitude = parseFloat(postionData[0].latitude)
        addMarker(postionData);
        console.log('2', postionData)
    }
    var scrollFunc=function(e){
        str =2;
        e=e || window.event;
        var number = map.getZoom();
        if(number == 15){
            deletePoint()
            addMarker(pointsT);
        }else if(number == 14){
            deletePoint()
            addMarker(pointsO);
            console.log('66', postionData)
        }
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false)
    }//W3C
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
    // 设备号查询搜素
    function houseListSeach(){
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(111.65,40.82), 11);
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        var CattleSeach = $("#CattleSeachDatacowLost").val();
        var map = {};
        map.searchName = CattleSeach;
        var jsonStr = JSON.stringify(map);
        local.search(jsonStr);
    }
</script>